<template>
	<view class="app-components-goods-layout-form-item-img" v-if="!!info.imgUrl || !!info.imgIllustrate || info.shows === 0">
		<view class="e-flex e-flex-items-start" :style="imgStyle">
			<view>
				<LoadImage :src="info.imgUrl" mode="widthFix" :size="`${imgWidth}rpx`" />
				<view class="e-flex-xy-center c-secondary e-p-t-28 e-p-b-16" v-if="info.imgIllustrate">
					<text>{{ info.imgIllustrate }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
	info: {
		imgUrl: string; //图片地址
		imgWidth?: number; //自定义的图片容器宽度，无值则铺满容器，有值则需根据值自适应移动端宽度，pc直接使用，容器宽高比为652/682约等于 1:1.05
		imgIllustrate?: string; //图片说明
		shows?: 0 | 1; //图片是否显示
		imgRule?: number; //图片对齐方式 1左对齐 2居中对齐 3右对齐
	};
}>();

const imgWidth = computed(() => props.info.imgWidth || 650);
const imgStyle = computed(() => {
	return {
		justifyContent: props.info.imgRule === 1 ? 'flex-start' : props.info.imgRule === 2 ? 'center' : 'flex-end'
	};
});
</script>

<style></style>
